import Taro, {Component} from '@tarojs/taro'
import classNames from 'classnames'
import {View, Text} from '@tarojs/components'
import Home from '../home/index'
import Mine from '../mine/index'
import {connect} from '@tarojs/redux'
import * as actions from '../../actions/wx'
import Navbar from '../../components/Navbar'
import Menu from '../../components/Menu'
import {getNavSize, getWindowHeight} from '../../utils/style'
import {isH5} from '../../utils/platform'
import './index.scss'

@connect(state => state.wx, {...actions})
class Tabs extends Component {
  state = {
    tabs: [
      {
        id: 1,
        name: '首页',
        icon: 'icon-home1'
      },
      {
        id: 2,
        name: '我的',
        icon: 'icon-person'
      }
    ],
    tabIndex: 0,
    pullDown: false,
    tabHeight: 0,
    isfixed: false
  }
  static options = {
    addGlobalClass: true
  }

  onShareAppMessage() {

  }


  config = {
    navigationBarTitleText: '',
    enablePullDownRefresh: true,
    navigationStyle: "custom"
  }

  onPullDownRefresh() {
    console.log('开始下拉刷新')
    this.setState({
      pullDown: true
    })
  }


  finishPullDown() {
    this.setState({
      pullDown: false
    })
    Taro.stopPullDownRefresh()
  }

  tabChange(index) {
    const {tabIndex} = this.state
    if (index !== tabIndex) {
      this.setState({
        tabIndex: index
      }, () => {
        console.log('tabIndex', this.state.tabIndex)
      })
      if (index == 1) {
        // this.props.dispatchWxUser()
      }
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentDidShow() {
    // Taro.onWindowResize((res)=> {
    //   console.log('屏幕状态',res)
    //   if(res.deviceOrientation == 'landscape') {
    //     Taro.showToast({
    //       title: '请旋转屏幕，在竖屏下使用下小程序',
    //       icon: 'none',
    //       duration: 600000,
    //       mask: true
    //     })
    //   }else {
    //     Taro.hideToast()
    //   }
    // })
    Taro.createSelectorQuery().in(this.$scope).select('#qianqian520').boundingClientRect(
      (rects) => {
        console.log('rects', rects)
        this.setState({
          tabHeight: rects.height * 2
        })
      }).exec()
  }

  isfixedChange(isfixed) {
    this.setState({
      isfixed
    })
  }

  operate() {
    Taro.navigateTo({
      url: `/pages/operate/index`
    })
  }

  jumpSearch() {
    Taro.navigateTo({
      url: `/pages/search/index`
    })
  }

  componentDidHide() {
  }

  componentCatchError() {
  }

  render() {
    const {tabs, tabIndex, pullDown, tabHeight, isfixed} = this.state
    const topHeight = getNavSize().statusHeight + getNavSize().navHeight ? getNavSize().statusHeight + getNavSize().navHeight : 0
    const homeHeight = getWindowHeight(false) - topHeight - tabHeight
    const height = homeHeight + 'px';
    const token = Taro.getStorageSync('token')
    const {userInfo} = this.props
    return (
      <View className="tab_page">
        <Navbar type="define">
          {/* <AtNoticebar icon='volume-plus' marquee speed={60} className="qian_noticebar">
                    <Text selectable={false} onLongPress={this.copy.bind(this,'qq95476020')}>
                    小店微信:qq95476020,长按复制微信号
                    </Text>
                </AtNoticebar>  */}
          {
            tabIndex == 0 &&
            <Menu pullDown={pullDown} onFinishPullDown={this.finishPullDown.bind(this)} tabIndex={tabIndex}
                  isfixed={isfixed}></Menu>
          }
          <View className={classNames('tab-nav', {
            'jia-icon-left1': tabIndex == 1,
            'jia-icon-left0': tabIndex == 0 && !isH5(),
            'jia-icon-left2': tabIndex == 0 && isH5()
          })}>
            {/*token && userInfo && userInfo.role == 1 */}
            {
              <Text onClick={this.operate.bind(this)}
                    className={classNames('icon', 'icon-jia', 'jia-icon', {'jia-icon-ligher': isfixed})}></Text>
            }
            {
              tabIndex == 0 &&
              (
                <View className="tab-search">
                  <View className="tab-search-wrapper" onClick={this.jumpSearch.bind(this)}>
                    <Text className='at-icon at-icon-search'></Text>
                    <Text className="tab-search-placeholder">关键词搜索</Text>
                  </View>
                </View>
              )
            }
          </View>
        </Navbar>
        <View className="tab_page_panel" style={{height}}>
          {/* style={{height}} */}
          {

            <View hidden={tabIndex == 1} className="switch_page">
              <Home pullDown={pullDown} onFinishPullDown={this.finishPullDown.bind(this)} tabIndex={tabIndex}
                    topHeight={topHeight}
                    isfixedChange={this.isfixedChange.bind(this)}></Home>
            </View>
          }
          {
            <View hidden={tabIndex == 0} className="switch_page">
              <Mine pullDown={pullDown} onFinishPullDown={this.finishPullDown.bind(this)} tabIndex={tabIndex}></Mine>
            </View>
          }
        </View>
        <View className="tab_wrapper" id="qianqian520">
          <View className="tab_wrapper_box">
            {
              tabs.map((item, index) => (
                <View className={classNames('tab_item', {'tab_item_active': tabIndex == index})}
                      key={item.id} onClick={this.tabChange.bind(this, index)}>
                  <Text className={classNames('icon', item.icon)}></Text>
                  {/* {
                          tabIndex == index &&
                        } */}
                  <Text className="tab_item_name">{item.name}</Text>
                </View>
              ))
            }
          </View>
        </View>
      </View>
    )
  }
}

export default Tabs
